<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-10-31 14:45
  PageName：c_practice3_SlideMenu.html
  Function：实战案例 - 设计滑动门菜单
  URL：http://localhost:8080/h_list/h4_practice/c_practice3_SlideMenu.html
-->

<head>
    <meta charset="UTF-8">
    <title>实战案例 - 设计滑动门菜单</title>

    <link href="images/base.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        .menu {
            position: absolute;     /* 绝对定位 */
            top: 120px;             /* 纵轴坐标 */
            left: 20px;             /* 横轴坐标*/
            height: 46px;           /* 高度 */
            width: 722px;           /* 宽度 */
            padding: 0 0 0 38px;    /* 增加左侧内边距 */
            margin: 0 auto;         /* 居中 */
            background: url(images/bg2.gif) repeat-x; /* 导航条背景图像 */
            list-style: none;       /* 清除项目符号 */
        }

        /* 靠左浮动，实现菜单项并列显示 */
        .menu li {
            float: left;
        }

        .menu li a {
            float: left;              /* 靠左浮动 */
            display: block;           /* 块状显示 */
            color: #FF04B7;           /* 字体颜色 */
            text-decoration: none;    /* 清除下划线 */
            font-family: sans-serif;  /* 字体 */
            font-size: 12px;          /* 字体大小 */
            padding: 0 0 0 16px;      /* 在左侧挤出一点空隙备用 */
            height: 46px;             /* 高度 */
            line-height: 46px;        /* 垂直居中 */
            text-align: center;       /* 水平居中 */
            cursor: pointer;          /* 手形鼠标样式 */
        }

        .menu li a b {
            float: left; /* 浮动显示 */
            display: block; /* 块状显示 */
            padding: 0 24px 0 8px; /* 平衡足有内侧空隙 */
        }

        /* 鼠标经过时，设置a，b元素的背景图像，对齐方向-左对齐 */
        .menu li.current a, .menu li a:hover {
            color: #fff;
            background: url(images/left2.gif) no-repeat;
            background-position: left;
        }

        /* 鼠标经过时，设置a，b元素的背景图像，对齐方向-右对齐 */
        .menu li.current a b, .menu li a:hover b {
            color: #fff;
            background: url(images/right2.gif) no-repeat right top;
        }
    </style>
</head>

<body id="css-zen-garden">
<div id="container">
    <div id="intro">
        <div id="pageHeader">
            <h1><span>CSS Zen Garden</span></h1>
            <h2><span><acronym title="cascading style sheets">CSS</acronym>设计之美</span></h2>

            <ul class="menu">
                <li class="current"> <a href="#"> <b>查看样式表CSS</b> </a> </li>
                <li> <a href="#"> <b>CSS参考资料</b> </a> </li>
                <li> <a href="#"> <b>常见问题</b> </a> </li>
                <li> <a href="#"> <b>投稿</b> </a> </li>
                <li> <a href="#"> <b>翻译文件</b> </a> </li>
            </ul>
        </div>

        <div id="quickSummary">
            <p class="p1">
                <span>展示以
                    <acronym title="cascading style sheets">CSS</acronym>技术为基础，并提供超强的视觉冲击力。只要选择列表中任意一个样式表，就可以将它加载到本页面中，并呈现不同的设计效果。
                </span>
            </p>

            <p class="p2">
                <span>下载
                    <a title="这个页面的HTML源代码不能够被改动。" href="http://www.csszengarden.com/zengarden-sample.html">HTML文档</a> 和
                    <a title="这个页面的CSS样式表文件，你可以更改它。" href="http://www.csszengarden.com/zengarden-sample.css">CSS文件</a>。
                </span>
            </p>
        </div>

        <div id="preamble">
            <h3><span>启蒙之路</span></h3>
            <p class="p1">
                <span>不同浏览器随意定义标签，导致无法相互兼容的
                    <acronym title="document object model">DOM</acronym>结构，或者提供缺乏标准支持的
                    <acronym title="cascading style sheets">CSS</acronym>等陋习随处可见，如今当使用这些不兼容的标签和样式时，设计之路会一路坎坷。
                </span>
            </p>

            <p class="p2">
                <span>现在，我们必须清除以前为了兼容不同浏览器而使用的一些过时的小技巧。感谢
                    <acronym title="world wide web consortium">W3C</acronym>、
                    <acronym title="web standards project">WASP</acronym>等标准组织，以及浏览器厂家和开发师们的不懈努力，我们终于能够进入Web设计的标准时代。
                </span>
            </p>

            <p class="p3">
                <span>CSS ZenGarden（样式表禅意花园）邀请您发挥自己的想象力，构思一个专业级的网页。让我们用慧眼来审视，充满理想和激情去学习CSS这个不朽的技术，最终使自己能够达到技术和艺术合而为一的最高境界。</span>
            </p>
        </div>
    </div>
    
    <div id="linkList">
        <div id="linkList2">
            <div id="lresources">
                <h3 class="resources"><span>参考资源</span></h3>
                <ul>
                    <li><a href="#">查看这个设计的样式表CSS</a>
                    <li><a href="#">CSS参考资料</a>
                    <li><a href="#">常见问题</a>
                    <li><a href="#">投稿</a>
                    <li><a href="#">翻译文件</a> </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
</html>
